<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>环形旋转效果</title>
  </head>
  <body>
    <!-- 主容器：圆形区域，用于显示旋转的文字 -->
    <div class="container">
      <!-- 中心固定文字 -->
      <div class="center">中</div>
      <!-- 环形旋转的文字元素 -->
      <div class="item">华</div>
      <div class="item">人</div>
      <div class="item">民</div>
      <div class="item">共</div>
      <div class="item">和</div>
      <div class="item">国</div>
    </div>

    <style>
      /* 圆形容器样式 */
      .container {
        height: 500px; /* 容器高度 */
        width: 500px; /* 容器宽度 */
        border-radius: 50%; /* 圆角50%形成圆形 */
        position: relative; /* 相对定位，作为子元素的定位参考 */
        border: 1px solid #000; /* 黑色边框 */
        display: flex; /* 弹性布局 */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        animation: rot 10s infinite linear;
      }
      @keyframes rot {
        to {
          transform: rotate(360deg);
        }
      }

      /* 中心文字样式 */
      .center {
        /* 可以添加中心文字的样式，目前为空 */
        animation: rot 10s infinite linear reverse;
      }

      /* 环形旋转的文字元素样式 */
      .item {
        position: absolute; /* 绝对定位，相对于容器 */
        display: inline-block; /* 行内块元素 */
        height: 20px; /* 元素高度 */
        width: 20px; /* 元素宽度 */
        line-height: 20px; /* 行高等于高度，实现垂直居中 */
        text-align: center; /* 文字水平居中 */
        animation: rot 10s infinite linear reverse;
      }
    </style>

    <script>
      // 全局变量定义

      /**
       * 设置环形文字位置函数
       * 根据三角函数计算每个文字在圆形路径上的位置
       */
      function setNodePosition() {
        let itemR = 10; // 文字元素的半径（用于位置微调）

        // 获取容器的半径（宽度的一半）
        let r = document.getElementsByClassName('container')[0].clientWidth / 2;

        // 获取所有环形文字元素并转换为数组
        let nodes = Array.from(document.getElementsByClassName('item'));
        let length = nodes.length; // 文字元素数量

        // 遍历每个文字元素，计算其在圆形路径上的位置
        for (let i = 0; i < length; i++) {
          // 使用三角函数计算x坐标：sin(角度) * 半径
          let x = r * Math.sin((i / length) * 2 * Math.PI);
          // 使用三角函数计算y坐标：cos(角度) * 半径
          let y = r * Math.cos((i / length) * 2 * Math.PI);

          // 设置元素位置（相对于容器中心）
          // top: 容器中心Y坐标 + x坐标 - 元素半径
          nodes[i].style.top = r + x - itemR + 'px';
          // left: 容器中心X坐标 + y坐标 - 元素半径
          nodes[i].style.left = r + y - itemR + 'px';
        }
      }
      setNodePosition();
    </script>
  </body>
</html>
